<template>
  <view>
    <!-- 触发按钮 -->
    <view class="input-wrapper" @click="showPicker">
      <view class="input-content" :class="{ 'color-tip': !selectedText }">
        {{ selectedText || '请选择行业类目' }}
        <!-- <uni-icons type="arrowdown" size="16" color="#999"></uni-icons> -->
      </view>
    </view>

    <!-- 弹出层 -->
    <uni-popup ref="popup" type="bottom" :mask-click="false">
      <view class="picker-container">
        <!-- 标题栏 -->
        <view class="picker-header">
          <text class="btn-cancel" @click="cancelPicker">取消</text>
          <text class="title">选择行业类目</text>
          <text class="btn-confirm" @click="confirmPicker">确定</text>
        </view>

        <!-- 选择器内容 -->
        <view class="picker-content">
          <!-- 一级类目 -->
          <picker-view 
            class="picker-column" 
            :value="[primaryIndex]" 
            @change="handlePrimaryChange"
          >
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in mccData" :key="item.id">
                {{ item.name }}
              </view>
            </picker-view-column>
          </picker-view>

          <!-- 二级类目 -->
          <picker-view 
            class="picker-column" 
            :value="[secondaryIndex]" 
            @change="handleSecondaryChange"
            v-if="currentSecondaryList.length > 0"
          >
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in currentSecondaryList" :key="item.id">
                {{ item.name }}
              </view>
            </picker-view-column>
          </picker-view>

          <!-- 单列占位 -->
          <view class="picker-column" v-if="currentSecondaryList.length === 0">
            <picker-view-column>
              <view class="picker-item">-</view>
            </picker-view-column>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props: {
    // 默认选中的MCC代码
    defaultValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mccData: [],
      primaryIndex: 0,
      secondaryIndex: 0,
      selectedMcc: '',
      selectedText: '',
      tempSelected: null // 临时存储选择结果
    }
  },
  computed: {
    // 当前选中的二级列表
    currentSecondaryList() {
      if (this.mccData[this.primaryIndex] && this.mccData[this.primaryIndex].children) {
        return this.mccData[this.primaryIndex].children
      }
      return []
    }
  },
  async created() {
	await this.getMccList();
    // 如果有默认值，设置选中项
    if (this.defaultValue) {
      this.setDefaultValue(this.defaultValue)
    }
  },
  methods: {
	async getMccList() {
		var res = await this.$api.sendRequest({
			url: '/shopapi/apply/getMccList',
			async: false
		});
		this.mccData = res.data;
	},
    // 显示选择器
    showPicker() {
      // 保存当前选择状态
      this.tempSelected = {
        mcc: this.selectedMcc,
        text: this.selectedText,
        primaryIndex: this.primaryIndex,
        secondaryIndex: this.secondaryIndex
      }
      this.$refs.popup.open()
    },
    
    // 取消选择
    cancelPicker() {
      // 恢复之前的选择状态
      if (this.tempSelected) {
        this.selectedMcc = this.tempSelected.mcc
        this.selectedText = this.tempSelected.text
        this.primaryIndex = this.tempSelected.primaryIndex
        this.secondaryIndex = this.tempSelected.secondaryIndex
      }
      this.$refs.popup.close()
    },
    
    // 确认选择
    confirmPicker() {
      this.$refs.popup.close()
      this.$emit('change', {
        mcc: this.selectedMcc,
        text: this.selectedText,
        primary: this.mccData[this.primaryIndex],
        secondary: this.currentSecondaryList[this.secondaryIndex] || null
      })
    },
    
    // 一级选择变化
    handlePrimaryChange(e) {
      this.primaryIndex = e.detail.value[0]
      this.secondaryIndex = 0
      this.updateSelectedResult()
    },
    
    // 二级选择变化
    handleSecondaryChange(e) {
      this.secondaryIndex = e.detail.value[0]
      this.updateSelectedResult()
    },
    
    // 更新选中结果
    updateSelectedResult() {
      const primaryItem = this.mccData[this.primaryIndex]
      if (!primaryItem) return
      
      if (this.currentSecondaryList.length > 0) {
        const secondaryItem = this.currentSecondaryList[this.secondaryIndex]
        if (secondaryItem) {
          this.selectedMcc = secondaryItem.mcc
          this.selectedText = `${primaryItem.name} - ${secondaryItem.name}`
        }
      } else {
        this.selectedMcc = ''
        this.selectedText = primaryItem.name
      }
    },
    
    // 根据MCC代码设置默认选中
    setDefaultValue(mccCode) {
      for (let i = 0; i < this.mccData.length; i++) {
        const primary = this.mccData[i]
        if (primary.children) {
          for (let j = 0; j < primary.children.length; j++) {
            if (primary.children[j].mcc === mccCode) {
              this.primaryIndex = i
              this.secondaryIndex = j
              this.updateSelectedResult()
              return
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
/* 输入框样式 */
.input-wrapper {
/*  padding: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 8rpx;
  border: 1rpx solid #eee; */
  
  vertical-align: middle;
  display: inline-block;
  flex: 1;
  text-align: right;
  color: $color-tip;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  &.have {
  	color: $color-title;
  }
}

.label {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.input-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  color: #333;
}

/* 弹出层样式 */
.picker-container {
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.btn-cancel, .btn-confirm {
  font-size: 30rpx;
  padding: 10rpx 20rpx;
}

.btn-cancel {
  color: #999;
}

.btn-confirm {
  color: #007aff;
}

.picker-content {
  display: flex;
  height: 500rpx;
}

.picker-column {
  flex: 1;
  height: 100%;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  font-size: 30rpx;
  color: #333;
}
</style>